<template>
  <el-dialog v-model="open" width="50%" title="项目质检情况" @close="closeDialog">
    <el-button type="text" style="margin-bottom: 20px">数据各个状态时间，显示该状态最后一次操作的时间和结果意见。</el-button>
    <table border="1" cellpadding="0" cellspacing="0">
      <tr>
        <th>操作名称</th>
        <th>操作时间</th>
        <th>质检员</th>
        <th>质检结果</th>
      </tr>
      <!-- <tr>
        <td>数据提交</td>
        <td><div>{{ data.submitTime }}</div></td>
        <td><div>{{ data.submitter }}</div></td>
        <td><div></div></td>
      </tr> -->
      <tr>
        <td>系统质检</td>
        <td><div>{{ data.qcTime }}</div></td>
        <td><div>{{ data.qcUser }}</div></td>
        <td><div>{{ data.qcFlag }}</div></td>
      </tr>
      <tr>
        <th colspan="4">详细情况</th>
      </tr>
      <tr>
        <td colspan="4"><div v-html="data.situation?.replace(/\n/g, '<br>')"></div></td>
      </tr>
    </table>
    <template #footer>
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({
  open: Boolean,
  data: Object
})
const emits = defineEmits(['update:open'])
const closeDialog = () => {
  emits('update:open', false)
}
</script>
<style scoped lang="scss">
  table{
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    border-color: var(--el-text-color-regular);
    th, td{
      padding: 10px 20px;
      text-align: center;
    }
    th{
      background-color: #bccef1;
    }
    td{
      div{
        min-height: 20px;
      }
    }
  }
</style>